﻿<Page
    x:Name="PageRoot"
    x:Class="LiveConnectExample.SkyDriveItemsPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:LiveConnectExample.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:liveConnectExample="using:LiveConnectExample"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    mc:Ignorable="d">

    <Page.Resources>
        <x:String x:Key="ChevronGlyph">&#xE26B;</x:String>
        <common:BooleanToVisibilityConverter x:Key="IfTrueThenVisible" TrueValue="Visible"/>
        <common:BooleanToVisibilityConverter x:Key="IfFalseThenVisible" TrueValue="Collapsed"/>
        <liveConnectExample:SkyDriveItemToIconUriConverter x:Key="SkyDriveItemToIconUriConverter"/>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page.
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Grid.RowSpan="2" Margin="116,136,116,46">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" Width="320" Margin="0,0,80,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.Resources>
                    <Style TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
                        <Setter Property="Margin" Value="5"/>
                    </Style>
                    <Style TargetType="HyperlinkButton" BasedOn="{StaticResource TextBlockButtonStyle}">
                        <Setter Property="Margin" Value="5"/>
                    </Style>
                </Grid.Resources>
                <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="99" Text="{Binding SkyDriveItem.name}" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="SemiBold"/>
                <Image Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="99" Source="{Binding ProfileImageSource}" Width="180" Height="180" Margin="0,20,0,20" />
                <TextBlock Grid.Row="2" Grid.Column="0" Text="Id: "/>
                <TextBlock Grid.Row="2" Grid.Column="2" Text="{Binding SkyDriveItem.id}"/>

                <TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="99" Text="Additional Values:"/>
                <ScrollViewer Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="99" VerticalScrollBarVisibility="Auto" Margin="5">
                    <ItemsControl ItemsSource="{Binding AdditionalDetails}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Key}"/>
                                    <TextBlock Text=" - "/>
                                    <TextBlock Text="{Binding Value}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>
            </Grid>
            <Grid Grid.Column="1" Visibility="{Binding IsConnected, Converter={StaticResource IfTrueThenVisible}}">
                <Grid.Resources>
                    <DataTemplate x:Key="SkyDriveFolderItemTemplate">
                        <GridView x:Name="SkydriveListing"
                                  ItemsSource="{Binding ElementName=PageRoot, Path=DataContext.SkyDriveItems}"
                                  AutomationProperties.AutomationId="SkydriveListing"
                                  AutomationProperties.Name="Items"
                                  TabIndex="1"
                                  SelectionMode="Single"
                                  IsSwipeEnabled="True"
                                  IsItemClickEnabled="True"
                                  ItemClick="HandleSkyDriveItemClicked"
                                  SelectionChanged="HandleSkyDriveItemSelectionChanged">
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Margin="6">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="60"/>
                                            <ColumnDefinition Width="190"/>
                                        </Grid.ColumnDefinitions>
                                        <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
                                            <Image Source="{Binding Converter={StaticResource SkyDriveItemToIconUriConverter}}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                                        </Border>
                                        <StackPanel Grid.Column="1" Margin="10,0,0,0">
                                            <TextBlock Text="{Binding name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                                            <TextBlock Text="{Binding id}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                            <interactivity:Interaction.Behaviors>
                                <liveConnectExample:AppBarDisplayOnItemSelectionBehavior DisplayOnSelectionAction="Bottom"/>
                            </interactivity:Interaction.Behaviors>
                        </GridView>
                    </DataTemplate>
                    <DataTemplate x:Key="SkyDrivePhotoItemTemplate">
                        <Image Source="{Binding ElementName=PageRoot, Path=DataContext.SkyDrivePhotoUrl}"/>
                    </DataTemplate>
                    <DataTemplate x:Key="SkyDriveAudioVideoItemTemplate">
                        <MediaElement Source="{Binding ElementName=PageRoot, Path=DataContext.SkyDriveMediaUrl}" AreTransportControlsEnabled="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    </DataTemplate>
                    <DataTemplate x:Key="SkyDriveEmbeddableItemTemplate">
                        <WebView Source="{Binding ElementName=PageRoot, Path=DataContext.SkyDriveEmbeddableItemUrl}"/>
                    </DataTemplate>
                    <liveConnectExample:SkyDriveContentTemplateSelector 
                        x:Key="SkyDriveContentTemplateSelector"
                        FolderOrAlbumTemplate="{StaticResource SkyDriveFolderItemTemplate}"
                        PhotoTemplate="{StaticResource SkyDrivePhotoItemTemplate}"
                        AudioVideoTemplate="{StaticResource SkyDriveAudioVideoItemTemplate}"
                        EmbeddableFileTemplate="{StaticResource SkyDriveEmbeddableItemTemplate}"/>
                </Grid.Resources>
                <ContentControl ContentTemplateSelector="{StaticResource SkyDriveContentTemplateSelector}"
                                Content="{Binding SkyDriveItem}"
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Stretch">
                </ContentControl>
            </Grid>
        </Grid>
        <!-- Back button and page title -->
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="BackButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="PageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Home" Label="Go To Start" Command="{Binding GoToStartCommand}"/>
            <AppBarButton Icon="Folder" Label="Special Folders">
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="Camera Roll" Command="{Binding GoToSpecialFolderCommand}" CommandParameter="CameraRoll"/>
                        <MenuFlyoutItem Text="Documents" Command="{Binding GoToSpecialFolderCommand}" CommandParameter="Documents"/>
                        <MenuFlyoutItem Text="Pictures" Command="{Binding GoToSpecialFolderCommand}" CommandParameter="MyPhotos"/>
                        <MenuFlyoutItem Text="Public" Command="{Binding GoToSpecialFolderCommand}" CommandParameter="Public"/>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Icon="Refresh" Label="Refresh" Command="{Binding RefreshCommand}"/>
            <AppBarSeparator Visibility="{Binding IsFolderOrAlbum, Converter={StaticResource IfTrueThenVisible}}"/>
            <AppBarButton Icon ="NewFolder" Label="New folder" Command="{Binding OpenCreateFolderCommand}" Visibility="{Binding IsFolderOrAlbum, Converter={StaticResource IfTrueThenVisible}}">
                <AppBarButton.Flyout>
                    <Flyout>
                        <Grid Width="320" Margin="20,10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBox Grid.Row="0" Text="{Binding FolderName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                            <Grid Grid.Row="1">
                                <Button Content="Create" HorizontalAlignment="Right" Command="{Binding CreateFolderCommand}"/>
                            </Grid>
                        </Grid>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Icon ="Upload" Label="Upload file" Command="{Binding UploadCommand}" Visibility="{Binding IsFolderOrAlbum, Converter={StaticResource IfTrueThenVisible}}"/>
            <CommandBar.SecondaryCommands>
                <AppBarButton Icon ="Delete" Label="Delete" Command="{Binding DeleteItemCommand}" Visibility="{Binding IsFolderOrAlbum, Converter={StaticResource IfTrueThenVisible}}"/>
                <AppBarButton Icon ="Edit" Label="Rename" Command="{Binding OpenRenameCommand}" Visibility="{Binding IsFolderOrAlbum, Converter={StaticResource IfTrueThenVisible}}">
                    <AppBarButton.Flyout>
                        <Flyout>
                            <Grid Width="320" Margin="20,10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBox Grid.Row="0" Text="{Binding ItemNewName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                                <Grid Grid.Row="1">
                                    <Button Content="Rename" HorizontalAlignment="Right" Command="{Binding RenameItemCommand}"/>
                                </Grid>
                            </Grid>
                        </Flyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
                <AppBarButton Icon ="Download" Label="Download" Command="{Binding DownloadCommand}"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

</Page>
